Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@/Climatemapped Africa styling issues improvement. #996

Merged
merged 5 commits into from
Nov 13, 2024
Merged

@/Climatemapped Africa styling issues improvement. #996

merged 5 commits into from
Nov 13, 2024

Conversation

koechkevin
Copy link
Contributor

Description

This PR fixes a few issues with climate mapped Africa

  • Aligns climate Mapped Africa logo button with page sections
  • Ensures the last element of navigation bar is aligned properly to the right.
  • Ensures Legend for Hero Page section is aligned with the map and the adjacent section's Search bar
  • Ensures carousel slides at 1 element per dot.
  • Ensures How it Works Section image covers the whole area

Fixes #

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Screenshots

image

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation

@koechkevin koechkevin requested a review from a team November 11, 2024 12:28
@koechkevin koechkevin self-assigned this Nov 11, 2024
kilemensi
kilemensi reviewed Nov 12, 2024
View reviewed changes
Copy link
Member

@kilemensi kilemensi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏽 ... UI looks good (haven't checked the code).

  1. Some slight alignment issues on Navbar and Hero still remain in lg
Screenshot 2024-11-12 at 08 56 22 Screenshot 2024-11-12 at 08 57 38 2. Is the map really clickable in `xs` and `sm` sizes (remember, users have to use fingers on mobile and tablet and not mouse pointers).

@koechkevin
Copy link
Contributor Author

👍🏽 ... UI looks good (haven't checked the code).

  1. Some slight alignment issues on Navbar and Hero still remain in lg

Screenshot 2024-11-12 at 08 56 22 Screenshot 2024-11-12 at 08 57 38 2. Is the map really clickable in xs and sm sizes (remember, users have to use fingers on mobile and tablet and not mouse pointers).

We might not achieve perfect left alignment on Map @kilemensi because of how react leaflet styles the map canvas by centering it based on zoom. We'd need a very high level of calculations on every map to get the perfect dimensions.
image

@koechkevin
Update Menu alignment
63c55af
@koechkevin
chore: Update Hero Map component alignment and height
0ce3894 
Adjust the alignment of the Hero Map component in the Climatemapped Africa app to align items at the bottom instead of the center. Also, increase the height of the component from 80 to 108 pixels for better vertical alignment.
@koechkevin
chore: Update Hero Map component alignment and height
92065e2
@kilemensi
Copy link
Member

We might not achieve perfect left alignment on Map @kilemensi because of how react leaflet styles the map canvas by centering it based on zoom. We'd need a very high level of calculations on every map to get the perfect dimensions.

💯 @koechkevin ... we don't need it to be pixel perfect for now, lets just make sure it's not noticeable/obvious. And the fact that we can change zoom in the CMS, it means we can perfect it without code change, right?

@kilemensi
Copy link
Member

[14:08:16] ERROR (payload): Error: cannot connect to MongoDB. Details: queryTxt ETIMEOUT cluster0.n82td2i.mongodb.net

PS: My Internet today is dog slow @koechkevin so don't wait for my approval; if others have approved, go ahead and merge.

@koechkevin
Copy link
Contributor Author

We might not achieve perfect left alignment on Map @kilemensi because of how react leaflet styles the map canvas by centering it based on zoom. We'd need a very high level of calculations on every map to get the perfect dimensions.

💯 @koechkevin ... we don't need it to be pixel perfect for now, lets just make sure it's not noticeable/obvious. And the fact that we can change zoom in the CMS, it means we can perfect it without code change, right?

We don't change zoom in the CMS, this is done in code

@kilemensi
Copy link
Member

We don't change zoom in the CMS, this is done in code

Then you're on your own there @koechkevin 🏃🏽‍♂️

@koechkevin
chore: Update Hero Map component zoom levels
66e4386 
Adjust the zoom levels for the Hero Map component in the Climatemapped Africa app based on the device type on payloadcms. On desktop, set the zoom level to 3, and on mobile, set it to 2. This ensures that the map appears correctly on different devices.
@koechkevin
Copy link
Contributor Author

We don't change zoom in the CMS, this is done in code

Then you're on your own there @koechkevin 🏃🏽‍♂️

Moved to CMS

@koechkevin koechkevin requested a review from kilemensi November 12, 2024 13:00
@koechkevin koechkevin added this pull request to the merge queue Nov 13, 2024
Merged via the queue into main with commit 0f5386a Nov 13, 2024
4 checks passed
@koechkevin koechkevin deleted the fix/climatemapped_spacing branch November 13, 2024 12:53
@kelvinkipruto kelvinkipruto mentioned this pull request Nov 14, 2024
Merged
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kelvinkipruto kelvinkipruto kelvinkipruto approved these changes

@kilemensi kilemensi Awaiting requested review from kilemensi

Assignees

@koechkevin koechkevin

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@koechkevin @kilemensi @kelvinkipruto